<template>
  <div class="ff-box">
    <el-input v-model="search" clearable placeholder="关键字"></el-input>
    <div class="list-box">
      <div v-for="fn in fnListShow" :key="fn.name" class="list-item" @click="handleItemClick(fn)">
        <div>
          <div>{{ fn.zwmc || fn.name }}</div>
          <div style="color: red">{{ fn.ffStr }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: "SelectFf",
  computed: {
    ...mapState(['fnList']),
    fnListShow () {
      return this.fnList.filter(item => {
        if (!this.search) return true
        let searchText = this.search.toUpperCase()
        if (item.zwmc.toUpperCase().indexOf(searchText) > -1) return true
        if (item.name.toUpperCase().indexOf(searchText) > -1) return true
        return false
      })
    }
  },
  data () {
    return {
      search: ''
    }
  },
  methods: {
    handleItemClick (ff) {
      this.$emit('select', ff)
    }
  }
}
</script>

<style lang="scss" scoped>
.ff-box {
  height: 100%;
  display: flex;
  flex-direction: column;

  .list-box {
    flex: 1;
    overflow-y: auto;
  }
}
</style>
